<template>
  <div>
    <div class="big">
       <i class="find"></i>
      <input 
      type="text" 
      placeholder="请输入关键词" 
      class="inputkey"
      v-model="keyword">
    </div>

   <div class="small" v-if="isShow">
     <span v-for = "(item, index) in keywordList"
     :key = "index" 
     class = "keywords"
     @click="clickword(item.first)"> 
     {{item.first}}
     </span>
   </div>
   <div v-else>
     <div>
      <div 
      v-for="(item, index) in searchList"
      :key="'search'+index"
      class="songList">
      <span :class="['rank','aa', {'isred': index<3}]">{{Number(index+1)>9? Number(index+1) : '0'+Number(index+1)}}</span>
      <p>{{item.name}}</p>
      <i class="sq"></i>
      <span
            v-for="(artist, index) in item.artists"
            :key="'artist'+index"
            class="singer"
          >
            {{artist.name}}
            <!-- 歌手是多人时 添加分割线 -->
            <span v-if="item.artists.length>1 && index!= item.artists.length-1">/</span>
           </span>
         <i class="lis"></i>
      </div>
     </div>
   </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      keyword: '',
      keywordList: [],
      // 是否显示热搜词
      isShow: true,
      searchList: [],
    }
  },
  created(){
    this.getKeyword();
  },
methods:{
  getKeyword(){
    // get写不写都可以
      this.$http.get("/search/hot")
        .then(res => {
          this.keywordList = res.data.result.hots;
        })
        .catch((err) => {
          console.log(err);
        })
    },
    clickword(word){
      // 填入对应的热搜词
      this.keyword = word;
      // 
      this.$http('/search/?keywords='+word)
      // 另一种写法：this.$http('/search', {params: {keywords: word}}) 
      .then(res => {
      // 隐藏热搜词，显示搜索结果列表
        this.isShow = false;
        // console.log(res.data.result);
        this.searchList = res.data.result.songs;
      })
      .catch(err => {
        console.log(err);
      })
    },
 }
}
</script>

<style scoped>
.big{
  position: relative;
}
.inputkey{
  background-color: #f4f4f4;
  display: block;
  width: 300px;
  height: 36px;
  border-radius: 18px;
  border: none;
  outline: none;
  padding-left: 40px;
  margin: 0 auto;

}
.find{
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  position: absolute;
  left: 20px;
  top: 10px;
  background-image: url('../../static/img/search.png');
}
.small{
  padding: 0 10px;
}
.keywords{
  display: inline-block;
  padding: 8px;
  border: 1px solid #888;
  border-radius: 20px;
  margin: 8px;
  font-size: 14px;
}
 .songList {
    border-bottom: 1px solid #f4f4f4;
    font-size: 18px;
    padding-left: 40px;
    position: relative;
    font-size: 14px;
  }
  .singer {
    color: #666;
    font-size: 12px;
  }
  .rank {
    position: absolute;
    top: 0;
    left: 8px;
    font-size: 18px;
    line-height: 63px;
  }
  .isred {
    color: #f00;
  }
  .sq{
  display: inline-block;
  width: 14px;
  height: 10px;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: 0 0;
}
.lis{
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: -25px 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>